<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #map{
            width:300px;
            height:600px;
            background-image: url('img/background.png');
            margin:0px auto;
            position:relative;
        }
        #player{
            width:40px;
            height:50px;
            background-image:url("img/z5.png");
            position:absolute;
            
            
        }
        .egg{
            background-image:url("img/bullet1.png");
            width:9px;
            height:20px;
            position:absolute;
            left:20px;
            top:50px;
        }
    </style>
</head>
<body>
    <div id = "map">
        <div id = "player" style="left:130px;top:450px;">

        </div>
        <div id="egg1" class="egg" style="display:none"></div>
        <div id="egg2" class="egg" style="display:none"></div>
        <div id="egg3" class="egg" style="display:none"></div>
        <div id="egg4" class="egg" style="display:none"></div>
        <div id="egg5" class="egg" style="display:none"></div>
        <div id="egg6" class="egg" style="display:none"></div>
        <div id="egg7" class="egg" style="display:none"></div>
        <div id="egg8" class="egg" style="display:none"></div>
        <div id="egg9" class="egg" style="display:none"></div>

    </div>
</body>
    <script>

        // w 87
        // a 65
        // s 83
        // d 68
        var player = document.getElementById("player");

        

        document.onkeydown = function(en){
            var x = parseInt(player.style.left);

            var y = parseInt(player.style.top);

            switch(en.keyCode)
            {
                case 87:
                    player.style.top = Math.max((y-10),0)+"px";
                    break;
                case 83:
                    player.style.top = Math.min((y+10),550)+"px";
                    break;
                case 65:
                    player.style.left = Math.max((x-10),0)+"px";
                    break;
                case 68:
                    player.style.left = Math.min((x+10),260)+"px";
                    break;
                case 32:
                    fire(x,y);
                    break;
            }
        }

        function fire(playerX,playerY){
            for(var i =1;i<=9;i++)
            {
                var bull = document.getElementById("egg"+i);
                if(bull.style.display=="none")
                {
                    bull.style.left = (playerX + 15)+"px";
                    bull.style.top = (playerY-20)+"px";

                    bull.style.display = "block";

                    return;
                }
            }
        }

        setInterval(biu,30);

        function biu(){
            for(var i =1;i<=9;i++)
            {
                var egg = document.getElementById("egg"+i);
                if(egg.style.display=="block")
                {
                    egg.style.top = (parseInt(egg.style.top)-10)+"px";
                    if(parseInt(egg.style.top)<=0)
                    {
                        egg.style.display="none";
                    }
                }
            }
        }
    </script>
</html>